import React, { createContext, useState, useContext, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as SplashScreen from 'expo-splash-screen';

const Context = createContext();
// consummer消费者，以后可以使用context内容
export const useInstall = () => {
    // 自定义一个hooks方法，在外面需要引入useContext、具体哪一个Context，直接定义好了
    return useContext(Context);
}
// Provider,提供者，提供容器
const Provider = (props) => {
    // 消除前面一开始的跳转
    const [isReady, setisReady] = useState(false);

    //  获取到本地的内容是异步的，要写点额外的代码
    const [isInstall, setIsInstall] = useState(false);
    // useEffect是异步的，所以先会执行下面的渲染出来是false然后会先渲染一下，后面获取到了以后才会进行true,跳入到首页
    useEffect(async () => {
        // 保证一上来是先进行阻止跳转的，先让页面去渲染
        await SplashScreen.preventAutoHideAsync();
        AsyncStorage.getItem('install')
            .then(res => {
                if (res) {
                    setIsInstall(true);
                }
                setisReady(true);
                // 都渲染完了以后再隐藏去
                SplashScreen.hideAsync();
            })
    }, [])
    if (!isReady) {
        return null;
    }
    return (
        // {外面大括号}插值表达式，里面{}包的是对象，简写证明名字内容都一样
        <Context.Provider value={{ isInstall, setIsInstall }}>
            {props.children}
        </Context.Provider>
    )
}
export default Provider;
